<template>
	<view class="content">
		<view class="title">提货单据<view class="icon iconfont icon-guanyu"></view></view>
		<view class="item">
			<view class="code">
				<text>货物信息</text>
			</view>
			<view class="goodslist">
				<text class="name">商品名称</text>
				<text class="name">商品数量</text>
				<text class="name">单位</text>
				<text class="name">商品单价</text>
			</view>
			<view class="goodslist" v-for="(item,index) in info.goods" :key="index">
				<text class="name">{{item.goods_name}}</text>
				<text class="name">{{(item.goods_num*1).toFixed(4)}}</text>
				<text class="name">{{item.sku_name}}</text>
				<text class="name">{{item.goods_price}}</text>
			</view>
		</view>
		<view class="title iconbox">发货信息<view class="icon iconfont icon-guanyu"></view></view>
		<!-- <view class="list">
			<text class="name">选择发货地</text>
			<text class="tips" @tap="visible=true" v-if="!orderInfo.area">请选择</text>
			<text class="val" v-else>{{orderInfo.area}}</text>
			<cityPicker :column="3" :mask-close-able="true" @confirm="confirm" @cancel="visible=false"
				:visible="visible" />
		</view> -->
		<view class="list">
			<text class="name">发货地址</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="orderInfo.beg_land" />
		</view>
		<view class="list">
			<text class="name">收货地址</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="orderInfo.consignee_address" />
		</view>
		<view class="list">
			<text class="name">收货人电话</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="orderInfo.consignee_phone" />
		</view>
		<view class="list">
			<text class="name">指派司机</text>
			<picker mode="selector" :range="driverList" range-key="nickname" @change="checkDriver">
				<text v-if="!orderInfo.driver" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.driver}}</text>
			</picker>
		</view>
		<view class="list">
			<text class="name">选择商品</text>
			<picker mode="selector" :range="goodsList" range-key="goods_name" @change="checkGoods">
				<text v-if="!orderInfo.goods_name" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.goods_name}}</text>
			</picker>
		</view>
		<view class="list">
			<text class="name">输入运输数量</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips" v-model="orderInfo.goods_num" />
		</view>
		<view class="list">
			<text class="name">计划装货时间</text>
			<uni-datetime-picker type="date" v-model="orderInfo.plan_beg_date" class="val">
				<text v-if="!orderInfo.plan_beg_date" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.plan_beg_date}}</text>
			</uni-datetime-picker>
		</view>
		<view class="list">
			<text class="name">计划到货时间</text>
			<uni-datetime-picker type="date" v-model="orderInfo.plan_end_date" class="val">
				<text v-if="!orderInfo.plan_end_date" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.plan_end_date}}</text>
			</uni-datetime-picker>
		</view>
		<view class="list">
			<text class="name">运费单价</text>
			<input type="text" placeholder="请输入" class="val" placeholder-class="tips" />
		</view>
		<!-- <view class="list">
			<text class="name">截止接单时间</text>
			<uni-datetime-picker type="date" v-model="orderInfo.end" class="val">
				<text v-if="!orderInfo.end" class="tips">请选择</text>
				<text v-else class="form-input">{{orderInfo.end}}</text>
			</uni-datetime-picker>
		</view> -->
		<view class="btnbox">
			<view class="btn next" >确认下单</view>
			<navigator class="btn" open-type="navigateBack" hover-class="none">返回</navigator>
		</view>
	</view>
</template>

<script setup>
	import { getDrivers,getOrderInfo} from '../../network/order.js';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	import {
		ref,
		reactive
	} from 'vue';
	import {onShow,onLoad} from '@dcloudio/uni-app';
	const orderInfo = reactive({
		purchase_order_id:'',
		// area: '',
		beg_land: '',
		consignee_address:'',
		consignee_phone:'',
		driver: '',
		driver_id:'',
		goods_name: '',
		goods_id:'',
		goods_num: '',
		goods_price:'',
		sku_name:'',
		plan_beg_date: '',
		plan_end_date: '',
		// end: ''
	})
	onShow(()=>{
	   getDriverList()
	})
	onLoad((res)=>{
		orderInfo.purchase_order_id = res.id
		getInfo(res.id)
	})
	const getDriverList = ()=>{
		getDrivers({}).then(res=>{
			Object.assign(driverList,res.data.data)
		})
	}
	const info = reactive({})
	const getInfo = (id)=>{
		let data= {
			order_id:id
		}
		getOrderInfo(data).then(res=>{
		  Object.assign(info,res.data.data)
		  orderInfo.prepared_by = info.prepared_by
		  // orderInfo.consignee_address = info.enquiry.consignee_address
		  Object.assign(goodsList,info.goods)
		})
	}
	const visible = ref(false)
	const confirm = (e) => {
		orderInfo.area = e.name
		visible.value = false
	}
	const driverList = reactive([])
	const checkDriver = (e) => {
		orderInfo.driver = driverList[e.detail.value].nickname
		orderInfo.driver_id = driverList[e.detail.value].id
	}
	const goodsList = reactive([])
	const checkGoods = (e) => {
		orderInfo.goods_name = goodsList[e.detail.value].goods_name
		orderInfo.goods_id = goodsList[e.detail.value].goods_id
		orderInfo.goods_price = goodsList[e.detail.value].goods_price
		orderInfo.sku_name = goodsList[e.detail.value].sku_name
	}
</script>

<style lang="scss">
	.title {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin-top: 2rpx;
		font-weight: bold;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 10rpx;

		.icon {
			font-size: 40rpx;
			color: #ff6700;
			font-weight: normal;
		}
	}

	.item {
		margin-bottom: 2rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.code {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			.status {
				font-size: 28rpx;
			}
		}

		.goodslist {
			width: 100%;
			margin: 10rpx 0;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #333;
			display: flex;
			justify-content: space-between;

			.name {
				width: 180rpx;
				text-align: right;
				text-align: center;
			}
		}
	}

	.list {
		width: 100%;
		display: flex;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 28rpx;
		justify-content: space-between;

		.name {
			width: 200rpx;
		}

		.tips {
			color: #999;
			width: 500rpx;
			text-align: right;
			font-size: 24rpx;
		}

		.val {
			color: #333;
			width: 520rpx;
			text-align: right;
			font-size: 28rpx;
		}
	}

	.btnbox {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;

		.btn {
			width: 200rpx;
			height: 60rpx;
			background-color: #fff;
			line-height: 60rpx;
			text-align: center;
			border-radius: 12rpx;
			font-size: 26rpx;
		}

		.next {
			background-color: #ffc400;
		}
	}
</style>